<template>
  <div class="platform-header">
    <div class="platform-title">{{ title }}</div>
    <div class="date-container">
      <div class="date-item">
        <div class="date-label">Current Date:</div>
        <div class="date-text">{{ formattedDate }}</div>
      </div>
      <div class="date-item">
        <div class="date-label">Last Updated:</div>
        <div class="date-text">{{ formattedTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "Platform Overview"
    }
  },
  data() {
    return {
      formattedDate: '',
      formattedTime: ''
    };
  },
  mounted() {
    this.updateCurrentDate();
    setInterval(this.updateCurrentDate, 1000);
  },
  methods: {
    updateCurrentDate() {
      const now = new Date();
      const day = String(now.getDate()).padStart(2, '0');
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const year = now.getFullYear();
      const hour = now.getHours();
      const minute = String(now.getMinutes()).padStart(2, '0');
      const ampm = hour >= 12 ? 'PM' : 'AM';
      const formattedHour = (hour % 12 || 12).toString().padStart(2, '0');

      this.formattedDate = `${day}/${month}/${year}`;
      this.formattedTime = `${formattedHour}:${minute}${ampm}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.platform-header {
  margin-bottom: 0.1667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .platform-title {
    font-size: .1667rem;
    font-weight: 700;
    color: #0d4c80;
  }

  .date-container {
    display: flex;

    .date-item {
      display: flex;
      align-items: center;

      &:not(:first-child) {
        margin-left: .1667rem;
      }

      .date-label {
        font-size: .1111rem;
        font-weight: 600;
        color: #0d4c80;
      }

      .date-text {
        margin-left: 8px;
        font-weight: 400;
        font-size: .1111rem;
        color: #6a6969;
      }
    }
  }
}
</style>